<template>
  <div  element-loading-text="加载中" style="paddingLeft:20px;paddingRight:20px;" class="com_EducationalSupport">
    <living-allowances v-if="applicationData" :view="view" :living-allowances-temp="applicationData" ref="livingAllowances"></living-allowances>
    <progress-list :approvalId="$route.query.approvalId" ></progress-list>
    <el-card v-if="action!=='view'">
        <div slot="header" class="clearfix change-head">
          <span class="el-card-header">变更审核</span>
        </div>
        <el-row>
          <el-col :span="8" :offset="8">
            <el-form ref="changeForm" :rules="rules" :model="changeTemp" label-width="120px">
              <el-form-item label="变更类型" prop="changeType">
                <el-radio-group v-model="changeTemp.changeType">
                  <el-radio :label="0" >修改</el-radio>
                  <el-radio :label="1" >停发</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="负责人" prop="changePrincipal">
                <el-input   v-model="changeTemp.changePrincipal"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="changeContact">
                <el-input  v-model="changeTemp.changeContact"></el-input>
              </el-form-item>
              <el-form-item label="变更审核意见" prop="changeOpinion">
                <el-input type="textarea" v-model="changeTemp.changeOpinion"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
    </el-card>
    <el-card class="box-card">
    <el-row v-if="!view">
      <el-col :offset="16">
        <el-button style="margin-top: 12px;"  type="info" plain @click="$router.back(-1)">取消</el-button>
        <el-button style="margin-top: 12px;"  type="primary" plain @click="submit">提交</el-button>
      </el-col>
    </el-row>
    </el-card>
  </div>
</template>
<script>
import LivingAllowances from "../../components/LivingAllowances";
import { queryLADetail } from "@/api/approval";
import { changeLa, changeReportLa} from "@/api/reception";
import { closeCollectTag } from "@/utils/tools";
import ProgressList from "../../components/ProgressList";

export default {
  components: {
    LivingAllowances,
    ProgressList
  },
  mounted: function() {
    if (this.$route.query.approvalId) {
      this.getApplicationData(this.$route.query.approvalId);
      this.action = this.$route.query.action
      if(this.action==='view'){
        this.view = true
      }
    }
  },
  data(){
    return {
      view: false,
      action: null,
      applicationData: null,
      changeTemp: {
        changeType: 0,
        changeOpinion: null,
        changePrincipal: null,
        changeContact: null
      },
      rules: {
        changeType: [{ required: true, message: "请选择变更类型", trigger: "change" }],
        changeOpinion: [{ required: true, message: "请填写意见", trigger: "blur" }],
        changePrincipal: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        changeContact: [{ required: true, message: "请输入联系电话", trigger: "blur" }]
      }
    }
  },
  methods: {
    getApplicationData(approvalId) {
      queryLADetail(approvalId).then(res => {
        this.applicationData = res.data;
        this.contentLoading = false
      });
    },
    submit(){
      if(this.action&&this.action==='change'){
        this.$refs["changeForm"].validate(valid => {
          if (valid) {
            this.$refs.livingAllowances.handleChange(this.changeTemp)
          }
        })
      }else if(this.action&&this.action==='changeReport'){
        this.$refs["changeForm"].validate(valid => {
          if (valid) {
            this.$refs.livingAllowances.handleChangeReport(this.changeTemp)
          }
        })
      }
    }
  }
}
</script>
<style>
.change-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.el-card-header {
  font-size: 20px !important;
  color: #3ba4f5 !important;
  padding-left: 20px;
  cursor: pointer;
}
</style>

